import 'package:flutter/material.dart';
import '../profile/profile_page.dart';

class MomentsPage extends StatelessWidget {
  const MomentsPage({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: CustomScrollView(
        slivers: [
          SliverAppBar(
            expandedHeight: 300,
            pinned: true,
            flexibleSpace: FlexibleSpaceBar(
              background: Image.asset(
                'assets/images/8.jpg',
                fit: BoxFit.cover,
              ),
            ),
            actions: [
              IconButton(
                icon: const Icon(Icons.camera_alt),
                onPressed: () {},
              ),
            ],
          ),
          SliverList(
            delegate: SliverChildBuilderDelegate(
              (context, index) {
                return _buildMomentItem(context, index);
              },
              childCount: 10,
            ),
          ),
        ],
      ),
    );
  }

  Widget _buildMomentItem(BuildContext context, int index) {
    // Generate 1-9 random images
    final int imageCount = 1 + (index % 9); // Deterministic for demo: 1, 2, ... 9
    final List<String> images = List.generate(
      imageCount,
      (i) => 'assets/images/${(index + i) % 9 + 1}.jpg',
    );

    return Container(
      padding: const EdgeInsets.all(16),
      decoration: const BoxDecoration(
        border: Border(
          bottom: BorderSide(color: Color(0xFFEDEDED)),
        ),
      ),
      child: Row(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          GestureDetector(
            onTap: () {
              Navigator.push(
                context,
                MaterialPageRoute(
                  builder: (context) => const ProfilePage(
                    name: 'Friend Name',
                    avatarUrl: 'assets/images/1.jpg',
                  ),
                ),
              );
            },
            child: Container(
              width: 40,
              height: 40,
              decoration: BoxDecoration(
                borderRadius: BorderRadius.circular(4),
                color: Colors.grey[300],
                image: const DecorationImage(
                  image: AssetImage('assets/images/1.jpg'), // Use local asset for avatar too
                  fit: BoxFit.cover,
                ),
              ),
            ),
          ),
          const SizedBox(width: 12),
          Expanded(
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                const Text(
                  'Friend Name',
                  style: TextStyle(
                    color: Color(0xFF576B95),
                    fontWeight: FontWeight.bold,
                    fontSize: 16,
                  ),
                ),
                const SizedBox(height: 4),
                Text(
                  'This is moment #$index with $imageCount images.',
                  style: const TextStyle(fontSize: 15),
                ),
                const SizedBox(height: 8),
                _buildImageGrid(images),
                const SizedBox(height: 8),
                Row(
                  mainAxisAlignment: MainAxisAlignment.spaceBetween,
                  children: [
                    const Text(
                      '2 hours ago',
                      style: TextStyle(color: Colors.grey, fontSize: 12),
                    ),
                    Container(
                      padding: const EdgeInsets.symmetric(horizontal: 8, vertical: 2),
                      decoration: BoxDecoration(
                        color: const Color(0xFFF7F7F7),
                        borderRadius: BorderRadius.circular(4),
                      ),
                      child: const Icon(Icons.more_horiz, size: 16, color: Color(0xFF576B95)),
                    ),
                  ],
                ),
              ],
            ),
          ),
        ],
      ),
    );
  }

  Widget _buildImageGrid(List<String> images) {
    if (images.isEmpty) return const SizedBox.shrink();

    if (images.length == 1) {
      return Container(
        constraints: const BoxConstraints(maxWidth: 200, maxHeight: 200),
        child: Image.asset(images.first, fit: BoxFit.cover),
      );
    }

    // WeChat style: 4 images -> 2 columns, others -> 3 columns
    int crossAxisCount = 3;
    if (images.length == 4) {
      crossAxisCount = 2;
    }

    return SizedBox(
      width: crossAxisCount == 2 ? 200 : 300, // Limit width for better look
      child: GridView.builder(
        padding: EdgeInsets.zero,
        shrinkWrap: true,
        physics: const NeverScrollableScrollPhysics(),
        gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
          crossAxisCount: crossAxisCount,
          crossAxisSpacing: 4,
          mainAxisSpacing: 4,
          childAspectRatio: 1.0,
        ),
        itemCount: images.length,
        itemBuilder: (context, index) {
          return Container(
            color: Colors.grey[200],
            child: Image.asset(
              images[index],
              fit: BoxFit.cover,
            ),
          );
        },
      ),
    );
  }
}
